<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>梯梯</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/admin.css">
    <link rel="stylesheet" href="../css/organzition.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
</head>
<style>
  .layui-table[lay-skin=line] td, .layui-table[lay-skin=line] th{
    border-bottom:0;
  }
  .layui-table td, .layui-table th{
    padding:14px 15px;
  }
</style>
<body>
  <div class="container">
      <!-- 左边选项栏 -->
     <div class="org-floor">

<form class="org-search"  name="myform">
     <input type="text" name="name" id="name" value="按名字搜索..."  onfocus="this.style.color='#888'; this.value='';"  onblur="this.style.color='#ddd';  this.value='按名字搜索...'"  style="color:#bbb;"/>

          <button  onclick="getName()"><i class="layui-icon" style="font-size: 25px; color: #EF7632;">&#xe615;</i> </button> 
        </form>
        <div class="org-floorTree">
          <ul id="red" class="treeview-red">
            <li class="open"><span>海威 银泰国际</span>
              <ul>
                <li><span>1幢1单元</span></li>
                <li><span>1幢2单元</span></li>
                <li><span>1幢3单元</span></li>
                <li><span>2幢1单元</span></li>
                <li><span>2幢2单元</span></li>
                <li><span>3幢1单元</span></li>
              </ul>
            </li>
            <li><span>喜来登物业</span>
              <ul>
                <li><span>1幢1单元</span></li>
                <li><span>1幢2单元</span></li>
              </ul>
            </li>
            <li><span>东方群物业</span>
              <ul>
                <li><span>1幢1单元</span></li>
                <li><span>1幢2单元</span></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <!-- 右边表格模块-->
      <img src="../images/small.jpg" height="600" width="900" alt=""> 
      <div class="section-right">
   
        <!--   table部分 -->
      <table class="layui-table" lay-skin="line">
      <thead >
         <tr>
           <th class="check"></th>
           <th>小区</th>
           <th>单元</th>
           <th>编号</th> 
           <th></th>
         </tr>
      </thead>
      <tbody class="org-table">
        <script type="text/html" id="tableTemp">
           <tr data-id={}>
           <td class="check"><input type="checkbox" name="" title="" lay-skin="primary" checked></td>
           <td>三三</td>
           <td>000</td>
           <td>12306</td>
           <td>户主</td>
           <td><span class="price">1000000.00</span></td>
         <!--   <td><a href="../商品统计.html">账户明细</a></td> -->
           <td><a href="javascript:;" data-url="./pages/公告管理.html" data-id="5">公告管理</a> </td>
           <td><a href="../商品统计.html">乘梯记录</a></td>
           </tr>
        </script>
      </tbody>
      </table>
    <div id="page-fen">
        <p id="page-counter">共有80条记录</p>
        <div id="page-num"></div>
    </div>
    </div>
  </div>
  <script src="../lib/jquery.js" type="text/javascript"></script>
  <script type="text/javascript" src="../layui/layui.js"></script>
  <script type="text/javascript" src="../js/organization.js"></script>
  <script src="../lib/js/jquery.cookie.js" type="text/javascript"></script>
  <script src="../lib/js/jquery.treeview.js" type="text/javascript"></script>
  <script>
  function getName(){     
  var name=myform.name.value;         
  console.log(name);
  }     
  //默认图片的加载
 window.onload=function(){
       $(".treeview>li>ul>li").click(function(){
    $("img").hide();
    $(".section-right").show();
  })
  }
 //默认图片的加载
 layui.use(['jquery','form','laypage','layer'], function(){
            var $ = layui.jquery,
                layer = layui.layer,
                laypage = layui.laypage;
 /*分页js的实现*/
 laypage({
    cont: 'page-num'
    ,pages: 8
    ,first: 1
    ,last:false
    ,groups:6
    ,prev: '<em><</em>'
    ,next: '<em>></em>'
  });
        });
/*分页js的实现*/
    $(function(){
      $("#red").treeview({
        animated: "fast",
        collapsed: true,
        unique: true,
        persist: "cookie",
        toggle: function() {
        }
      });

      layui.use(['jquery','element','layer'], function(){
        var element = layui.element;
        var $ = layui.jquery;
        var layer = layui.layer;
        
        var a = {count: 10};
        searchTable(a);
        function searchTable(param){
          $.ajax({
          url: 'http://api.douban.com/v2/movie/in_theaters',
          type: 'get',
          dataType: 'jsonp',
          data: param || {},
          // success: function(data){
          //   console.log("success");
          // }
        })
        .done(function(data){
          console.log(data);
          var str= '';
          if(data.subjects.length){
            for(var i=0;i<data.subjects.length;i++){
            str +=
            '<tr>'+
            '<td class="check"><input type="checkbox" name="" title="" lay-skin="primary" checked></td>'+
            '<td>'+ data.subjects[i].title +'</td>'+
            '<td>'+ data.subjects[i].year +'</td>'+
            '<td>'+ data.subjects[i].subtype +'</td>'+
            '<td>'+'' +'</td>'+
            '</tr>'
          }
          $(".org-table").html(str);
         /* detailOrg();
          recordOrg();*/
        }else{
          str = '<tr><td colspan="7">暂无数据</td></tr>';
          $(".org-table").html(str);
        }
        })
        .fail(function() {
          console.log("error");
        });
        }
//账户明细接口连接
      /* function detailOrg(){
          $(".org-detail").click(function(){
            var movieId = $(this).data("id");
            console.log(movieId);
            layer.open({
                type:2
                ,area:['50%', '50%']
                ,title:"账户明细"
              ,content: '账户明细.html'
            });
          })
        }*/
       //乘梯记录
/*        function recordOrg(){
          $(".org-record").click(function(){
            var movieId = $(this).data("id");
            console.log(movieId);
            layer.open({
                type:2
                ,area:['50%', '50%']
                ,title:"乘梯记录"
              ,content: '乘梯记录.html'
            });
          })
        }*/
      });
      $(".treeview>li>ul>li").click(function(){
        console.log(123);
        $(".treeview>li>ul>li").css({"backgroundColor":"#FDF9F0","color":"#888"});
        $(this).css({"backgroundColor":"#EF7632","color":"#fff","border-radius":"5px"});
      });
    })
  </script>

</body>
</html>
